<!-- 文件名: app/templates/base.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}社交媒体监控{% endblock %}</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 56px; /* 适应固定顶部导航栏 */
        }

        .sidebar {
            position: fixed;
            top: 56px; /* 从顶部导航栏下方开始 */
            bottom: 0;
            left: 0;
            width: 220px; /* 固定宽度 */
            z-index: 100;
            padding: 20px 0;
            box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
            background-color: #f8f9fa;
        }

        .sidebar-sticky {
            position: relative;
            top: 0;
            height: calc(100vh - 76px);
            padding-top: .5rem;
            overflow-x: hidden;
            overflow-y: auto;
        }

        .navbar-brand {
            padding-top: .75rem;
            padding-bottom: .75rem;
            font-size: 1rem;
            background-color: rgba(0, 0, 0, .25);
            box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
        }

        main {
            margin-left: 220px; /* 与侧边栏宽度一致 */
            padding: 20px;
        }

        @media (max-width: 767.98px) {
            .sidebar {
                position: static;
                width: 100%;
                height: auto;
            }

            main {
                margin-left: 0;
            }
        }

        .platform-tiktok {
            background-color: #25F4EE;
            color: white;
        }

        .platform-douyin {
            background-color: #FF0050;
            color: white;
        }

        .platform-instagram {
            background-color: #C13584;
            color: white;
        }

        .platform-kuaishou {
            background-color: #8BC135FF;
            color: white;
        }

        .platform-retry {
            background-color: #c1a035;
            color: white;
        }

        .platform-hot {
            background-color: #c16f35;
            color: white;
        }

        .video-container {
            margin-bottom: 20px;
        }

        .video-player {
            width: 100%;
            max-width: 400px;
        }

        .modal-header h5 {
            font-weight: 600;
        }

        .card-header h5 {
            font-weight: 600;
        }

        .list-group-item i {
            width: 20px;
            text-align: center;
        }

        #welcomeModal .modal-body {
            padding: 1.5rem;
        }

        #welcomeModal .card {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            margin-bottom: 1rem;
        }

        #welcomeModal .alert-warning {
            margin-bottom: 1rem;
        }

        #welcomeModal .form-check {
            padding-left: 2rem;
        }
    </style>
    {% block styles %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="/">社交媒体监控系统</a>
</nav>

<div class="container-fluid">
    <div class="row">
        <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block sidebar">
            <div class="sidebar-sticky pt-3">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link" href="/users">
                            <span data-feather="users"></span>
                            用户管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/videos">
                            <span data-feather="film"></span>
                            视频列表
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/stats">
                            <span data-feather="bar-chart-2"></span>
                            统计信息
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/hot-videos">
                            <span data-feather="trending-up"></span>
                            热门视频
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/settings">
                            <span data-feather="settings"></span>
                            系统设置
                        </a>
                    </li>
                </ul>
            </div>
        </nav>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">{% block page_title %}{% endblock %}</h1>
            </div>

            {% block content %}{% endblock %}
        </main>
    </div>
</div>

<!-- 欢迎弹窗 -->
<div class="modal fade" id="welcomeModal" tabindex="-1" aria-labelledby="welcomeModalLabel" aria-hidden="true"
     data-bs-backdrop="static">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="welcomeModalLabel">欢迎使用社交媒体监控系统</h5>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card border-success">
                                <div class="card-header bg-success text-white">
                                    <h5 class="mb-0">✨ 主要功能</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item"><i class="bi bi-display me-2"></i>多平台支持：监控抖音、TikTok、Instagram和快手
                                                </li>
                                                <li class="list-group-item"><i class="bi bi-person me-2"></i>用户管理：添加、删除和管理监控的社交媒体账户
                                                </li>
                                                <li class="list-group-item"><i class="bi bi-arrow-repeat me-2"></i>自动更新：定时检查被监控账户的最新内容
                                                </li>
                                                <li class="list-group-item"><i class="bi bi-fire me-2"></i>热门内容收集：自动获取平台热门视频
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-md-6">
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item"><i class="bi bi-bar-chart me-2"></i>数据统计：查看视频播放量、点赞数等数据
                                                </li>
                                                <li class="list-group-item"><i class="bi bi-hdd me-2"></i>本地存储：将视频内容下载至本地服务器
                                                </li>
                                                <li class="list-group-item"><i class="bi bi-file-excel me-2"></i>批量导入：通过Excel批量导入用户
                                                </li>
                                                <li class="list-group-item"><i class="bi bi-calendar-date me-2"></i>日期筛选：可按日期查询热门视频
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card border-info">
                                <div class="card-header bg-info text-white">
                                    <h5 class="mb-0">🖥️ 使用指南</h5>
                                </div>
                                <div class="card-body">
                                    <div class="accordion" id="userGuideAccordion">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingOne">
                                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#collapseOne" aria-expanded="true"
                                                        aria-controls="collapseOne">
                                                    用户管理
                                                </button>
                                            </h2>
                                            <div id="collapseOne" class="accordion-collapse collapse show"
                                                 aria-labelledby="headingOne" data-bs-parent="#userGuideAccordion">
                                                <div class="accordion-body">
                                                    <ol>
                                                        <li>访问"<strong>用户管理</strong>"页面</li>
                                                        <li>可以手动添加单个用户，也可以通过Excel批量导入</li>
                                                        <li>支持添加TikTok、抖音、Instagram和快手平台的用户</li>
                                                        <li>可以按平台、分类筛选用户，也可以按用户名搜索</li>
                                                    </ol>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingTwo">
                                                <button class="accordion-button collapsed" type="button"
                                                        data-bs-toggle="collapse" data-bs-target="#collapseTwo"
                                                        aria-expanded="false" aria-controls="collapseTwo">
                                                    视频监控
                                                </button>
                                            </h2>
                                            <div id="collapseTwo" class="accordion-collapse collapse"
                                                 aria-labelledby="headingTwo" data-bs-parent="#userGuideAccordion">
                                                <div class="accordion-body">
                                                    <ol>
                                                        <li>系统会按照设定的时间间隔自动检查用户更新</li>
                                                        <li>在"<strong>视频列表</strong>"页面可以查看所有已下载的视频
                                                        </li>
                                                        <li>"<strong>热门视频</strong>"页面展示各平台热门内容</li>
                                                        <li>可以按日期筛选视频，方便查看每天的热门内容</li>
                                                        <li>支持视频的播放、下载和批量操作</li>
                                                    </ol>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingThree">
                                                <button class="accordion-button collapsed" type="button"
                                                        data-bs-toggle="collapse" data-bs-target="#collapseThree"
                                                        aria-expanded="false" aria-controls="collapseThree">
                                                    系统设置
                                                </button>
                                            </h2>
                                            <div id="collapseThree" class="accordion-collapse collapse"
                                                 aria-labelledby="headingThree" data-bs-parent="#userGuideAccordion">
                                                <div class="accordion-body">
                                                    <p>在"<strong>系统设置</strong>"页面，您可以自定义以下参数：</p>
                                                    <ul>
                                                        <li>各平台的检查更新间隔</li>
                                                        <li>热门视频的拉取时间和页数</li>
                                                        <li>热门视频的保留天数和最大数量</li>
                                                        <li>下载重试相关配置</li>
                                                        <li>API令牌设置</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="card border-danger">
                                <div class="card-header bg-danger text-white">
                                    <h5 class="mb-0">⚠️ 使用协议</h5>
                                </div>
                                <div class="card-body">
                                    <div class="alert alert-warning">
                                        <p><strong>请注意：</strong>本软件仅供个人学习和研究使用，请遵守以下条款：</p>
                                        <ol>
                                            <li>用户需遵守所在国家和地区的法律法规。</li>
                                            <li>尊重内容创作者的知识产权，不得将下载的内容用于商业用途。</li>
                                            <li>使用本软件产生的任何法律责任由用户自行承担。</li>
                                            <li>请勿滥用本软件，遵循各平台的使用条款。</li>
                                        </ol>
                                    </div>
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" id="agreeTerms">
                                        <label class="form-check-label" for="agreeTerms">
                                            我已阅读并同意上述使用协议
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="startUsingBtn" disabled>开始使用</button>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Feather Icons -->
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
    feather.replace();
</script>
<!-- 添加 JavaScript 逻辑控制弹窗显示 -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 检查是否首次访问
        const hasVisitedBefore = localStorage.getItem('hasVisitedBefore');

        // 获取弹窗元素和相关按钮
        const welcomeModal = new bootstrap.Modal(document.getElementById('welcomeModal'));
        const agreeTermsCheckbox = document.getElementById('agreeTerms');
        const startUsingBtn = document.getElementById('startUsingBtn');

        // 同意条款复选框变更事件
        agreeTermsCheckbox.addEventListener('change', function () {
            startUsingBtn.disabled = !this.checked;
        });

        // 开始使用按钮点击事件
        startUsingBtn.addEventListener('click', function () {
            localStorage.setItem('hasVisitedBefore', 'true');
            welcomeModal.hide();
        });

        // 如果是首次访问，显示弹窗
        if (!hasVisitedBefore) {
            welcomeModal.show();
        }
    });
</script>
{% block scripts %}
{% endblock %}
</body>
</html>